<template>
  <div id="container" class="container" :style="setWidth">

        <div v-for="(item,index) in dataColRol" :key="index" :style="setDiv(item)">
            <itemComponent
              :items="item"
              :index="index"
              @inputChange="inputChange"
            >
            </itemComponent>
        </div>
  </div>
</template>

<script>
import itemComponent from './itemComponent'
import layoutAlgorithm from '../utils/layoutAlgorithm'
export default {
  name: 'FromItemComponents',
  components:{itemComponent},
  computed: {
    // 计算属性的 getter
    dataColRol:function (){
      let list = layoutAlgorithm(this.defaultColumn,this.colData);
      return Object.keys(list).reduce((temp,current) => {
        temp.push(list[current])
        return temp
      },[])

    },
    setDiv:function(){
      return function(item){
        return ` grid-column:${item.x}/${item.col+item.x};grid-row:${item.y}/${item.y+item.row};`;  //height:${100*item.row}px
      };
    },
    setWidth: function () {
      // `this` 指向 vm 实例
      let columns=Number(this.defaultColumn) || 2;
      return `grid-template-columns: repeat(${columns},1fr`;
    }
  },
  props:{
    defaultColumn:{
      type:Number,
      default:4
    },
    formItemLists:{
      type:Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      colData: {},
      index:0,
      formDataObject:{
      }
    }
  },
  watch:{
    formDataObject:{
      handler (val) {
        this.colData.map((items,i)=>{
          if(items.validate.hasOwnProperty('dynamicforcompute')){
            this.dynamicforcompute(items,val,i);
          }else if(items.validate.hasOwnProperty('hidecolumn')){
            this.hidecolumn(items,val,i);
          }
        })
      },
      deep:true
    }

  },
  methods:{
    dynamicforcompute(items,json,index){
        let str = items.validate.dynamicforcompute.refcolumns.reduce((temp,current) => {
          temp = temp.replace(new RegExp(current,"g"), Number(json[current]));
          return temp
        },items.validate.dynamicforcompute.express);
        this.colData[index].value = eval(str);
        this.formDataObject[this.colData[index].field]=eval(str);

    },
    hidecolumn(items,json){
        items.validate.hidecolumn.refcolumn.map((temp) => {
        if(json[items.field]===items.validate.hidecolumn.refval){
          this.colData=this.colData.map((item)=>{
            if(item.field===temp){
              item.show=false;
            }else{
              item.value=json[item.field];
            }
            return item;
          });
        }
        return temp
      })
      let formDate=this.colData.reduce((arr,item) => {
        if(item.show!=false){
          arr.push(item)
        }
        return arr
      },[]);
      this.colData=formDate;


    },
    inputChange (value,items,index) {
      this.index=index;
      this.colData[index].value = value;
      this.formDataObject[items.field]=value;
    },
    layout(formItemLists){
      let formDate=formItemLists.reduce((arr,item) => {
        if(item.show!=false){
          arr.push(item)
        }
        return arr
      },[]);
      this.colData=formDate;
      this.makeDate(this.colData);
    },
    makeDate(data){
      this.formDataObject=data.reduce((option,item) => {
         option[item.field] = item.value;
         return option
      },{});
    }
  },
  created(){
    this.colData = JSON.parse(JSON.stringify(this.formItemLists));
    this.layout(this.colData);
  }
}
</script>

<style>
#container > div {
  background-color: skyblue;
  min-height: 100px;
  border:1px solid #fff;
  box-sizing: border-box;
}
.container {
  display: grid;
  grid-template-columns: repeat(4, 20%);
  grid-auto-rows: minmax(100px,auto);
  /* grid-row-gap: 0.5em; */
  /* grid-column-gap: 20px; */

}
</style>
